<template>
  <div class="p-3">
    <a-card style="height: 820px" :bordered="false">
      <a-form layout="inline" :model="searchForm">
        <!-- <a-form-item label="申请人">
          <a-date-picker v-model:value="searchForm.examinePersonId" picker="year" />
        </a-form-item> -->
        <a-form-item label="申请时间">
          <a-range-picker v-model:value="searchForm.applyTime" />
        </a-form-item>
        <a-form-item label="审批时间">
          <a-range-picker v-model:value="searchForm.examineTime" />
        </a-form-item>
        <a-form-item label="审批人">
          <a-select
            v-model:value="searchForm.examinePersonId"
            placeholder="请选择审批人"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="审批状态">
          <a-select
            v-model:value="searchForm.examineStatus"
            placeholder="请选择审批状态"
          >
            <a-select-option value="0">未审批</a-select-option>
            <a-select-option value="1">同意</a-select-option>
            <a-select-option value="2">拒绝</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        class="mt-5"
        :scroll="{ y: 600 }"
      >
        <template #bodyCell="{ column, record }">
          <a-space v-if="column.dataIndex == 'active'">
            <a-button type="link" @click="onEdit(record, 1)"> 同意 </a-button>
            <a-button type="link" danger @click="onEdit(record, 2)">
              拒绝
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <!-- 同意 -->
    <a-modal
      :visible="isConsentOpen"
      width="1000px"
      title="操作审批"
      @ok="ConsentOk"
      @cancel="isConsentOpen = false"
    >
      <a-textarea
        v-model:value="TextValue"
        placeholder="请输入审批意见"
        :rows="4"
      />
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue';
import {
  SearchOutlined,
  RedoOutlined,
  HistoryOutlined,
  ReconciliationOutlined,
} from '@ant-design/icons-vue';
import {
  getAreaSummaryApi,
  getAreaSummaryExportApi,
  getHeatInspectionExportHistoryApi,
} from '#/api/core/statistical';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

const searchForm = reactive({
  createPersonId: '',
  examinePersonId: undefined,
  applyTime: '',
  examineTime: '',
  examineStatus: undefined,
});
const TextValue = ref('');
const isConsentOpen = ref(false);
const columns = [
  {
    title: '归属机构',
    dataIndex: 'companyName',
    key: 'companyName',
    align: 'center',
  },
  {
    title: '项目',
    dataIndex: 'heatExchangeStationName',
    key: 'heatExchangeStationName',
    align: 'center',
  },
  {
    title: '供暖能力',
    dataIndex: 'feeRate',
    key: 'feeRate',
    align: 'center',
  },
  {
    title: '建筑面积',
    dataIndex: 'buildingArea',
    key: 'buildingArea',
    align: 'center',
  },
  {
    title: '应收全费面积',
    dataIndex: 'ysqfArea',
    key: 'ysqfArea',
    align: 'center',
  },
  {
    title: '应收全费金额',
    dataIndex: 'ysqfMoney',
    key: 'ysqfMoney',
    align: 'center',
  },
  {
    title: '应收基本费面积',
    dataIndex: 'ysjbfArea',
    key: 'ysjbfArea',
    align: 'center',
  },
  {
    title: '应收基本费金额',
    dataIndex: 'ysjbfMoney',
    key: 'ysjbfMoney',
    align: 'center',
  },
  {
    title: '实收基本费面积',
    dataIndex: 'ssjbfArea',
    key: 'ssjbfArea',
    align: 'center',
  },
  {
    title: '实收基本费折算面积',
    dataIndex: 'ssjbfzsArea',
    key: 'ssjbfzsArea',
    align: 'center',
  },
  {
    title: '实收基本费金额',
    dataIndex: 'ssjbfArea',
    key: 'ssjbfArea',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
    align: 'center',
  },
];
const dataSource = ref([]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const onSearch = () => {
  const query = {
    page: pagination.current,
    limit: pagination.pageSize,
    createPersonId: searchForm.createPersonId ?? '',
    examinePersonId: searchForm.examinePersonId ?? '',
    examineStatus: searchForm.examineStatus ?? '',
    startTime: searchForm.applyTime
      ? dayjs(searchForm.applyTime[0] ?? '').format('YYYY-MM-DD')
      : '',
    endTime: searchForm.applyTime[1]
      ? dayjs(searchForm.applyTime[1] ?? '').format('YYYY-MM-DD')
      : '',
    examineStartTime: searchForm.examineTime[0]
      ? dayjs(searchForm.examineTime[0] ?? '').format('YYYY-MM-DD')
      : '',
    examineEndTime: searchForm.examineTime[1]
      ? dayjs(searchForm.examineTime[1] ?? '').format('YYYY-MM-DD')
      : '',
  };
  getAreaSummaryApi(query).then((res: any) => {
    console.log(res);
    dataSource.value = res.data.data;
    pagination.total = res.data.total;
  });
};
const onEdit = (record, type) => {
  isConsentOpen.value = true;
};
const ConsentOk = () => {};
</script>
<style scoped></style>
